import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { imgInter } from '../../../data/Interface'
import { getcommlist, send_comment_commodity, Delcomment, getMsg } from '../../../redux/actionCreator'
import { getcomment } from '../../../redux/actionCreator/comment'
import pxPage from '../../../root/pxPage'
import { Toast } from 'antd-mobile';
import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const alert = Modal.alert;
const operation = Modal.operation;
const prompt = Modal.prompt;
// import {get} from 'module'
class Evaluation extends Component {
    constructor(props) {
        super(props)
        this.props.dispatch(getcommlist(JSON.parse(localStorage.getItem('commoditydetail')).commodity_id))
        this.state = {
            commenttext: '',
            // obj: JSON.parse(localStorage.getItem('dynaicdateil')),
            // flag: 0
            // comment:this.props.comment.reverse()
        };
    }
    formatDate = (now) => {
        let year = now.getFullYear();  //取得4位数的年份
        let month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
        let date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();      //返回日期月份中的天数（1到31）
        let hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();     //返回日期中的小时数（0到23）
        let minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes(); //返回日期中的分钟数（0到59）
        let second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds(); //返回日期中的秒数（0到59）
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }
    componentDidMount() {
        document.addEventListener("keydown", this.handleEnterKey);
    }

    componentWillUmount() {
        document.removeEventListener("keydown", this.handleEenterKey);
    }
    Delcomm = (item) => {
        console.log(item)
        return <i
            // 这里写点击举报
            style={{ color: '#99555F',position:'relative',bottom:`${pxPage(15)}px`,left:`${pxPage(200)}px`}}
            className="iconfont icon-del"

            onClick={() => alert('确认删除？', 'defaultValue for prompt', [
                { text: '取消', onPress: () => { console.log('点击了取消') } },
                {
                    text: '确认', onPress: value => {
                        this.props.dispatch(Delcomment(item.comment_id))
                        console.log(`输入的内容:${value}`)
                        Toast.success('删除成功！', 1)
                    }
                },
            ], 'default', '')}
        ></i>
    }
    render() {
        // const comment  = this.props.comment.reverse() 
        // console.log(this.state.comment)s
        return <>
            <div style={{ width: '90%', margin: '0 auto' }}>
                <textarea
                    onChange={(e) => {
                        this.setState({ commenttext: e.target.value })
                    }}
                    // onChange={(e) =>this.setState({ commenttext=e.target.value }) }
                    placeholder={"评论内容"}
                    style={{ lineHeight: '2em', borderRadius: '5px', width: `${pxPage(250)}px`, backgroundColor: '#333', border: '1px solid #aaa', height: `${pxPage(30)}px`, marginTop: '10px', padding: '0.3em', display: 'inline' }}
                    type="text"
                    value={this.state.commenttext}
                >

                </textarea>
                <i
                    onClick={() => {
                        if (this.state.commenttext != '') {
                            this.props.dispatch(send_comment_commodity(JSON.parse(localStorage.getItem('commoditydetail')).commodity_id, JSON.parse(localStorage.getItem('user')).user_id, this.state.commenttext, this.formatDate(new Date())))
                            Toast.success('发送评论成功！', 1)
                            this.setState({ commenttext: '' })
                            // console.log(this.state.commenttext)
                        } else {
                            Toast.fail('没有评论内容哦！', 1);
                        }

                    }}
                    style={{
                        lineHeight: '2em', marginRight: `${pxPage(15)}px`, color: '#888', fontSize: '1.8em', position: 'relative', bottom: `${pxPage(10)}px`, left: `${pxPage(5)}px`
                    }}
                    className="iconfont icon-duigou"></i>

            </div>
            <ul style={{ width: '90%', margin: '0 auto', marginBottom: '6em' }}>
                {this.props.comment.map((item, index) => {
                    // console.log(item)
                    return <li

                        key={index}
                        style={{ backgroundColor: '#333', border: '1px solid', borderRadius: '10px', padding: '1em', marginTop: '1em' }}>
                        <div>
                            <img
                                style={{ height: '2em', width: '2em', borderRadius: '50%', border: '1px solid' }}
                                src={`${imgInter}${item.user_pic}`}>
                            </img>
                            <span style={{ fontSize: '1.1em', height: '2em', position: 'relative', bottom: '0.8em', left: '0.5em' }}>{item.user_name}</span>
                        </div>
                        <div style={{ fontSize: '1em', wordWrap: 'break-word', margin: '0.5em' }}>{item.comment_context}</div>
                        <div style={{ fontSize: '0.7em', color: 'lightgrey' }}>{`发布于${item.time}`}</div>
                         {
                            item.user_id == getMsg(this.props).user_id
                                ? this.Delcomm(item)
                                : console.log('不是你的评论')
                        }
                       
                    </li>
                })}
            </ul>

        </>
    }
}

const mapStateToProps = (state) => ({ comment: state.comment })

export default withRouter(connect(mapStateToProps)(Evaluation))